<template>
  <div class="header">
    <img class="logo" :src="logo" alt="">
    <img class="menu" @click="clickHandler" :src="icon" alt="">
  </div>
</template>
<script setup lang="ts">
import { computed, defineEmits, defineProps} from 'vue'

import logo from '~/assets/logo.png'
import menu from '~/assets/menu.png'
import close from '~/assets/close.png'
const props = defineProps({
  showMenu: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['update:showMenu'])
const icon = computed(() => {

  return props.showMenu ? close : menu

})

const clickHandler = () => {

  emits('update:showMenu', !props.showMenu)

}
</script>

<style lang="stylus" scoped>
@import '~/styles/common.styl';
.header
  padding 0 16px
  height 44px
  {flexBox}
  justify-content space-between
  .logo
    width 120px
  .menu
    width 22px

</style>